<script setup>
import { getCurrentInstance, onMounted, ref, inject } from "vue";
const arr = [
  {
    id: 1,
    uid: "wo1",
    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content:
      "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  },
  {
    id: 2,
    uid: "wo2",

    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content: "xxxxxxxxxxx",
  },
  {
    id: 3,
    uid: "wo1",

    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content: "xxxxxxxxxxx",
  },
  {
    id: 4,
    uid: "wo1",

    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content: "xxxxxxxxxxx",
  },
  {
    id: 5,
    uid: "wo1",

    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content: "xxxxxxxxxxx",
  },
  {
    id: 6,
    uid: "wo1",

    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content: "xxxxxxxxxxx",
  },
  {
    id: 7,
    uid: "wo2",

    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content: "xxxxxxxxxxx",
  },
  {
    id: 8,
    uid: "wo2",

    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content: "xxxxxxxxxxx",
  },
  {
    id: 9,
    uid: "w2",

    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content: "xxxxxxxxxxx",
  },
  {
    id: 10,
    uid: "wo2",

    url: "https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b",
    content: "xxxxxxxxxxx",
  },
];
// const scrollToTop = ref();
onMounted(() => {
  const instance = getCurrentInstance();
  console.log(instance.refs);
});
// 不重要的代码，仅展示使用 - end
const log = (...params) => {
  console.log(params);
};
const sendMessage = () => {
  const socket = io("ws://127.0.0.1:7001/", {
    // 实际使用中可以在这里传递参数
    query: {
      room: "demo",
      userId: `client_${Math.random()}`,
    },

    transports: ["websocket"],
  });
  console.log(socket);
  socket.on("connect", () => {
    const id = socket.id;
    // 监听自身 id 以实现 p2p 通讯
    socket.on(id, (msg) => {
      log("#receive,", msg);
    });
  });
  // 接收在线用户信息
  socket.on("online", (msg) => {
    log("#online,", msg);
  });

  // 系统事件
  socket.on("disconnect", (msg) => {
    log("#disconnect", msg);
  });

  socket.on("disconnecting", () => {
    log("#disconnecting");
  });

  socket.on("error", () => {
    log("#error");
  });

  window.socket = socket;
};
// init
</script>

<template>
  <div id="container">
    <div className="chat">
      <div className="head">
        <el-button type="primary" @click="sendMessage">点击</el-button>
        <div className="name">
          <div className="c">
            <div className="avatar">
              <img
                src="https://pic1.zhimg.com/v2-3ecb42375945161b70359f7cf2d2f9a2_xs.jpg?source=172ae18b"
                alt=""
              />
            </div>
            <div className="username">
              {{ "Vue3测试号" }}
            </div>
          </div>
        </div>
        <div className="close">
          <svg
            t="1664514532012"
            class="closed"
            viewBox="0 0 1026 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4165"
            width="30"
            height="30"
          >
            <path
              d="M857.088 224.256q28.672-28.672 69.12-28.672t69.12 28.672q29.696 28.672 29.696 68.608t-29.696 68.608l-382.976 380.928q-12.288 14.336-30.72 19.968t-38.912 4.608-40.448-8.704-34.304-22.016l-376.832-374.784q-29.696-28.672-29.696-68.608t29.696-68.608q14.336-14.336 32.256-21.504t36.864-7.168 37.376 7.168 32.768 21.504l313.344 309.248z"
              p-id="4166"
              fill="#d4237a"
            ></path>
          </svg>
        </div>
      </div>
      <div className="body">
        <div className="cx">
          <div
            className="chatContent"
            v-for="item in arr"
            :key="item.id"
            ref="scrollToTop"
          >
            <div className="list">
              <div className="avatarImg">
                <!-- 聊天头像 -->
                <img :src="item.url" alt="" />
              </div>
              <div className="text">
                <!-- 聊天内容 -->
                <div className="realText">
                  {{ item.content }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="textArea">
        <div className="files"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 620px;
  min-width: 253.6px;

  .chat {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 600px;
    border-radius: 30px;
    background-color: #ff5000;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    .head {
      width: 100%;
      height: 50px;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
      display: flex;
      border-bottom: 1px dashed #f6f6f6;
      .name {
        width: 60%;
        height: 50px;
        position: relative;
        border-top-left-radius: 30px;

        .c {
          display: flex;
          position: absolute;
          right: 0;
          .avatar {
            width: 30px;
            height: 30px;
            padding: 10px 0 10px 0;
            &:hover {
              cursor: pointer;
            }
            img {
              width: 30px;
              height: 30px;
              border-radius: 15px;
            }
          }
          .username {
            height: 30px;
            width: auto;
            padding: 10px;
            line-height: 30px;
            font-size: 20px;
            font-weight: 900;
            &:hover {
              cursor: pointer;
              color: #ff5000;
            }
          }
        }
      }
      .close {
        width: 40%;
        height: 50px;
        position: relative;
        border-top-right-radius: 30px;
        &:hover {
          cursor: pointer;
        }
        .closed {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .body {
      height: 400px;
      width: 100%;
      border-bottom: 1px dashed #f6f6f6;
      position: relative;

      .cx {
        height: 400px;
        position: absolute;
        bottom: 0;
        width: 100%;
        &::-webkit-scrollbar {
          width: 4px;
          height: 10px;
        }
        overflow-y: auto;
        .chatContent {
          padding-top: 10px;
          padding-bottom: 10px;
          .list {
            width: 100%;
            height: auto;
            display: flex;
            .avatarImg {
              padding-left: 10px;
              padding-right: 10px;
              width: 30px;
              height: 30px;
              img {
                width: 30px;
                height: 30px;
                border-radius: 5px;
              }
            }
            .text {
              width: 300px;
              height: auto;
              background-color: #fff;
              border-radius: 5px;
              .realText {
                height: 100%;
                width: 280px;
                border-radius: 5px;
                white-space: normal;
                word-break: break-all;
                word-wrap: break-word;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
    .textArea {
      width: 100%;
      height: 200px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
    }
  }
}
.active {
  background-color: #000;
}
@media only screen and (max-width: 1200px) {
  #container {
    position: absolute;
    top: 700px;
  }
}
@media only screen and (max-width: 768px) {
  #container {
    .c {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .username {
      display: none;
    }
  }
}
</style>
